<template>
  <header>
    <a @click="jump('home')">home</a>
    <a @click="jump('about')">about</a>
  </header>
  <main>
    <RouterView />
  </main>
</template>

<script setup lang="ts">
import { RouterView, useRouter } from "vue-router";

const router = useRouter();

function jump(routerName: string) {
  router.replace({ name: routerName });
}
</script>

<style scoped>
header {
  background-color: #eee;
}
header > a {
  color: #666;
  margin: 3px 10px;
  cursor: pointer;
}

header > a:hover {
  color: blue;
}
</style>
